<template>
  <div>

    <Form :label-width="labelWidth" label-position="right" style="border: 1px solid #dcdee2;" class="form">
      <div style="padding: 10px;">
        <template>
          <Row>
            <Col span="8" style="padding-left: 10px;">
              <Button style="padding-left: 10px" type="primary" @click="openTagAlert">添加标签</Button>
            </Col>
          </Row>
          <Row style="padding: 10px">
            <Table border :columns="tagColumnsAll" :data="tagDatasAll" width="100%" height="300px">
              <!--申请原因-->
              <template slot-scope="{ row }" slot="applyDom">
                <Input v-model="row.apply" placeholder="请输入申请原因" />
              </template>
              <!--开始账期-->
              <template slot-scope="{ row }" slot="startTimeDom">
                <DatePicker type="date" placeholder="请选择开始账期" v-model="row.startTime"/>
              </template>
              <!--结束账期-->
              <template slot-scope="{ row }" slot="endTimeDom">
                <DatePicker type="date" placeholder="请选择结束账期" v-model="row.endTime"/>
              </template>
              <!--订购区域-->
              <template slot-scope="{ row }" slot="orderAreaDom">
                <Select v-model="row.orderArea" multiple >
                  <Option v-for="item in cityList" :value="item.provName" :key="item.provName">{{ item.provName }}</Option>
                </Select>
              </template>
              <template slot-scope="{ row }" slot="tagsDom">
                <Tag>{{row.tag.propName}}</Tag>
              </template>
            </Table>
          </Row>
        </template>

      </div>
    </Form>

    <Modal id="tagModel" v-model="showTagInfo" width="96%" @on-ok="cardSave">
      <span slot="header" style="font-size: 22px; font-weight: bold;">添加标签</span>
      <tagInfo ref="tags"/>
    </Modal>
  </div>
</template>

<script>
  import {cityList} from "../../../../utils/dataInfo/province";
  import tagInfo from "./tag_info"

  export default {
    name: "tag_model",
    components: {tagInfo},
    data() {
      return {
        //规则
        validate: {
          orderArea: [
            {required: true, message: '订购区域不能为空', trigger: 'blur'},
          ]
        },
        // 申请原因、开始账期、结束账期、订购区域
        tagColumnsAll: [{
          title: '申请原因',
          key: 'apply',
          slot: 'applyDom',
          width: 200,
        },
          {
            title: '开始账期',
            key: 'startTime',
            slot: 'startTimeDom',
            width: 200,
          },
          {
            title: '结束账期',
            key: 'endTime',
            slot: 'endTimeDom',
            minWidth: 200
          }, {
            title: '订购区域',
            key: 'orderArea',
            slot: 'orderAreaDom',
            minWidth: 200
          }, {
            title: '标签名称',
            key: 'tag',
            slot: 'tagsDom',
            minWidth: 200
          },
        ],
        tagDatasAll: [],
        //表单
        tagInfo: {
          startDate: '',
          endDate: '',
          orderArea: [],
        },
        //总标签
        allTags: [],
        cityList: cityList,
        labelWidth: 140,
        showTagInfo: false,
      }
    },
    created() {

    },
    methods: {
      //打开弹框
      openTagAlert() {
        this.showTagInfo = true;
      },
      cancelTagAlert() {
        this.showTagInfo = false
      },
      cardSave() {
        this.allTags = this.$refs.tags.returnValue();
        this.tagDatasAll = this.getData(this.allTags);
      },
      getData(list) {
        let resultList = [];
        list.forEach(val => {
          let item = {
            apply: '',
            startTime: '',
            endTime: '',
            orderArea: '',
            tag: val
          };
          resultList.push(item);
        });
        return resultList;
      }
    }
  }
</script>

<style scoped>
 #tagModel >>> .ivu-modal {
    top: 20px !important;
  }
</style>
